<script lang="ts">
export default {
  name: "RepoCompEntityHeader"
}
</script>

<template>
  <el-form ref="queryFormRef" :inline="true" :model="dataState.queryParams">
    <el-form-item>
      <el-button :icon="Plus" type="success" @click="handleCreateDialog">新增</el-button>
    </el-form-item>

    <el-form-item prop="modelName">
      <el-input v-model="dataState.queryParams.modelName" clearable placeholder="模块名称" @keyup.enter="handleQuery"/>
    </el-form-item>

    <el-form-item prop="ownerId">
      <el-input v-model="dataState.queryParams.ownerId" clearable placeholder="所有者" @keyup.enter="handleQuery"/>
    </el-form-item>

    <el-form-item>
      <el-button :icon="Search" type="primary" @click="handleQuery">搜索</el-button>
      <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import {onMounted, reactive, toRefs} from "vue";

import {
  RepoCompQueryParam
} from "@/api/cloud/repository/repocomp/file/types";

import {Plus, Search, Refresh} from '@element-plus/icons-vue';

const emit = defineEmits(['query', 'create', 'update', 'delete']);// 定义组件的事件通知


// 数据状态：定义
let dataState = reactive({
  // 配置类型选项
  modelTypeOptions: [] as OptionType[],
  componentOptions: [] as OptionType[],
  // 查询参数
  queryParams: {pageNum: 1, pageSize: 10} as RepoCompQueryParam,
});

/**
 * 新增设备对话框
 */
function handleCreateDialog() {
  emit('create', 'header', 'create');
}

function handleQuery() {
  emit('query', 'header', dataState.queryParams);
}

function resetQuery() {
  dataState.queryParams.ownerId = undefined;
  dataState.queryParams.modelName = undefined;
  dataState.queryParams.modelType = undefined;
  dataState.queryParams.modelVersion = undefined;
  dataState.queryParams.component = undefined;
  dataState.queryParams.groupName = undefined;
  emit('query', 'header', dataState.queryParams);
}

/**
 * 响应页面安装：页面的初始化工作
 */
onMounted(() => {
  dataState.modelTypeOptions.push({value: 'service', label: 'service'} as OptionType);
  dataState.modelTypeOptions.push({value: 'decoder', label: 'decoder'} as OptionType);
  dataState.modelTypeOptions.push({value: 'template', label: 'template'} as OptionType);
  dataState.modelTypeOptions.push({value: 'webpack', label: 'webpack'} as OptionType);
  dataState.modelTypeOptions.push({value: 'system', label: 'system'} as OptionType);

  dataState.componentOptions.push({value: 'kernel', label: 'kernel'} as OptionType);
  dataState.componentOptions.push({value: 'system', label: 'system'} as OptionType);
  dataState.componentOptions.push({value: 'service', label: 'service'} as OptionType);
});

</script>
